<template>
  <div class="header">
    <router-link to="/" class="logo">主站</router-link>
    <div class="user-info">
      <div class="user-info-item">
        <el-popover>
          <template #reference>
            <Avatar class="avatar" :avatar="loginStore.imageUrl"
                                :userId="loginStore.uid" :width="35"/>
          </template>
          <template #default>
            <div class="avatar-popover">
              <span class="avatar-popover-item" @click="logout">退出登录</span>
            </div>
          </template>
        </el-popover>
        <el-tag class="tips-calendar_wrap" type="warning" effect="light" round>
          <span style="display:flex;justify-content: center">成为UP主的第{{UserTime}}天 <el-icon class="el-icon--right"><ArrowRightBold /></el-icon></span>
        </el-tag>
      </div>
      <div class="user-btn">
        <div class="btn-item">
          <el-icon size="24"><CopyDocument /></el-icon>
        </div>
        <div class="btn-item">
          <el-icon size="24"><Download /></el-icon>
        </div>
      </div>
    </div>
  </div>
  <div class="ucenter-body">
    <div class="left-side">
      <router-link class="upload-btn iconfont icon-upload"
        to="/ucenter/upload">投稿</router-link>
      <div class="menu-list">
        <el-menu :rouler="true"
           :default-active="defaultActive"
           :default-openeds="defaultOpeneds">
          <template v-for="item in menuList" :key="item">
            <el-menu-item :index="item.path" v-if="!item.children">
              <span :class="['iconfont','icon-'+item.icon]"></span>
              <span>{{item.name}}</span>
            </el-menu-item>
            <el-sub-menu v-else :index="item.path">
              <template #title>
                <span :class="['iconfont','icon-'+item.icon]"></span>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item :index="sub.path" v-for="sub in item.children" :key="sub">
                <span class="sub-menu">{{sub.name}}</span>
              </el-menu-item>
            </el-sub-menu>
          </template>
        </el-menu>
      </div>
    </div>
    <div class="right-content">
      <div class="right-content-inner">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script setup>
import Avatar from "@/components/Avatar.vue";
import {useLoginStore} from "@/stores/loginStore.js";
import {getCurrentInstance, onMounted, ref, unref, watch, watchEffect} from "vue";
import {MenuList} from "@/utils/Memu.js";
import {useRoute, useRouter} from "vue-router";
import Confirm from "@/utils/Confirm.js";
import VueCookies from "vue-cookies";
import Message from "@/utils/Message.js";
import auth_logout from "@/data/auth_logout.json"

const loginStore = useLoginStore()
const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const defaultActive = ref()
const defaultOpeneds = ref([])
const menuList = [...MenuList]
const UserTime = ref(1749)

const init = () => {
  // 初始化菜单 展开
  menuList.forEach(item => {
    defaultOpeneds.value.push(item.path)
  })
}
const logout = () =>{
  Confirm({
    message:"确定退出登录吗？",
    okfun: async ()=>{
      const res = auth_logout;
      if(res.code === 200){
        loginStore.dellUserInfo();
        Message.success("退出登录成功")
        VueCookies.set('token',"")
        router.push("/")
      }
      if(!res){
        return;
      }
    }
  })
}

watch(() => route, (newVal,oldValue) => {
  defaultActive.value = route.path
},{immediate: true,deep: true})

onMounted(() => {
  init()
})
</script>
<style scoped lang="scss">
.header{
  width: 100%;
  background: #fff;
  height: 60px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  .logo{
    margin-left: 20px;
    font-size: 16px;
    color: #333;
    text-decoration: none;
  }
  .user-info{
    display: flex;
    margin-right: 20px;
    .avatar{
      cursor: pointer;
    }
    .user-info-item{
      display: flex;
      align-items: center;
      margin-right: 15px;
      height: 20px;
      border-right: 1px solid #e7e7e7;
      .tips-calendar_wrap{
        width: 163px;
        height: 30px;
        background: rgba(250, 142, 87, .1);
        border: 1px solid rgba(250, 142, 87, .43);
        border-radius: 14px;
        padding: 5px 12px 5px 16px;
        font-size: 12px;
        color: #fa8e57;
        text-align: center;
        margin-right: 32px;
        margin-left: 12px;
        cursor: pointer;
      }
    }
    .user-btn{
      display: flex;
      align-items: center;
      margin-right: 80px;
      .btn-item{
        margin-left: 16px;
        cursor: pointer;
        :deep(.el-icon){
          margin-left: 16px;
          svg{
            fill: #757575;
            font-weight: 600;
          }
        }
      }
    }
  }
}
.ucenter-body{
  display: flex;
  background: #fafafa;
  padding-top: 60px;
  min-height: calc(100vh);
  .left-side{
    width: 200px;
    background: #fff;
    height: calc(100vh);
    border-right: 1px solid #f4f4f4;
    text-align: center;
    overflow-y: auto;
    .upload-btn{
      background: #00a1d6;
      display: inline-block;
      color: #fff;
      padding: 10px 40px;
      margin: 20px auto;
      text-decoration: none;
      cursor: pointer;
      &::before{
        margin-right: 5px;
      }
      &:hover{
        opacity: .8;
      }
    }
  }
  .menu-list{
    :deep(.el-menu){
      border-right: none;
    }
    .iconfont{
      display: flex;
      align-items: center;
      width: 20px;
      font-size: 18px;
      margin-right: 15px;
    }
    .sub-menu{
      padding: 0 30px;
    }
    :deep(.el-menu-item){
      height: 46px;
      padding-left: 30px;
    }
    :deep(.el-sub-menu__title){
      padding-left: 30px;
    }
  }
  .right-content{
    flex: 1;
    height: calc(100vh);
    overflow: auto;
    .right-content-inner{
      margin-top: 16px;
      background: #fff;
    }
  }
}
// 适配屏幕宽度 大于1200px时
@media (min-width: 1500px) {
  .ucenter-body{
    .right-content{
      .right-content-inner{
        width: 1283px;
        margin: 16px auto 0 auto !important
      }
    }
  }
}
// 适配屏幕宽度 小于1200px时
@media (max-width: 1500px) {
  .ucenter-body{
    .right-content{
      .right-content-inner{
        margin-right: 72px;
        margin-left: 72px;
      }
    }
  }
}
</style>
<style>
.avatar-popover{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  .avatar-popover-item{
    cursor: pointer;
  }
  &:hover{
    background-color: #f5f7fa;
  }
}
</style>
